Interactive Elements
Overview
These custom cells provide an additional variety of options for user interaction. They are:
- copy to clipboard,
- button,
- calendar,
- callout,
- email,
- phone and
- text to speech.
Given the dynamic nature of modern data, if necessary you can specify a process condition to indicate if the cell should be part of the result. For example, if the current object does not have a value for a field then do not display a copy icon next to it.
There is also an option to suppress duplicates across iterating objects. The comparison is based on the formula result.
Copy to Clipboard
The cell formula result may be "next" or "previous" indicating the relative cell containing the text to copy, a catalog component, or string or other value to be copied. Clicking the icon in the result copies the item to the clipboard.
The unique custom cell properties are shown below.
Shown below are a label cell and a custom cell in the design mode.
The output from these 2 cells is shown below.
Clicking on the image copies the indicated text to the clipboard. Browser permissions may be needed for this to complete successfully.
Button
General Usage
The cell formula result is an interactive action object. Clicking the button in the result performs the associated action (i.e., urlAction, componentAction, etc.). In the right hand cell properties area set the label or icon for the button along with other properties.
The unique custom cell properties are shown below.
A list of actions is discussed in the next section.
Action Related Macros
Qarbine provides several interaction options for menu options and buttons. A macro function is used to create an action object. That object is then triggered when its owning button is clicked or menu option is selected. Below are some of the action creation macros. See the Macro Functions documentation for more details.
| Action Creation Macros |
|---|
| action = askAiAction(text, aiAlias, options) |
| action = askAiPromptAction(fullComponentPath, aiAlias, options, key1, value1, key2, value2...) |
| action = componentOpen(componentObjectOrReference) |
| action = componentObjectAction([run,open, edit, copyReference], catalogObject, key1, value1, key2, value2...) |
| action = dialogAction(title, key1, value1, ...) |
| action = googleAction(what [, areaName]) |
| action = javaScriptAction(targetObjectName, fnName, value1, value2...) |
| action = urlAction(URL, Get|Post, key1, value1, key2, value2...) |
The javaScriptAction can be used to call application functions. Below is an example of using this function. The first argument is the name of a global variable. Common values are ‘window’ and ‘tool’. The second is the name of the function to call. Below is an embedded use case example.
In the embedded use case the click is captured by the IFrame’s embeddedTool object and a message is sent using PostMessage to the dashboard’s helper object. The helper then calls the dashboard code based on the options provided at startup.
Calendar
The cell formula result may be:"next" or "previous" indicating the relative cell containing the date(s), or date value(s). Clicking the icon in the result shows a calendar with the date(s). This is useful to gain understanding of a date’s day of week, point in time within a month, or other point in time context.
The unique custom cell properties are shown below.
Shown below are a label cell and the custom cell in the design mode.
The output from these 2 cells is shown below.
Clicking on the image opens a dialog with a calendar as shown below.
Callout
General Usage
The cell formula result is the short text to show when using a button. The full text formula determines what details are shown. The button option opens either a text or JSON dialog. The Tooltip option shows the full text in a bubble.
The primary custom cell properties are shown below.
Shown below are a label cell and the custom cell in the design mode.
The output from these 2 cells is shown below.
With a simple formula of “Hello world”, clicking on the button shows
Using the custom cell property below
Results in the output shown below.
Using the custom cell property below
Results in the output shown below.
Ask AI Usage
The secondary custom cell options provide for interactive RAG. Below is an example of these options filled out.
The cell formula provides the text which is appended to the prompt entered.
Shown below are a label cell and 2 call out cells in the design mode. The first has a formula which sets a description variable. The second references the description variable.
The output from these cells is shown below.
Clicking on the button shows the description text in a dialog. Clicking on the image performs an AI Assistant interaction and displays the result in a dialog.
NOTE- These on-demand AI Assistant interactions may be preferred to the explicit AI Assistant interactions using the completions() macro. The reason is that each AI Assistant interaction has some “cost” associated with it and there is no need to spend your AI tokens to obtain text that is not absolutely necessary.
Email
The cell formula result may be:"next" or "previous" indicating the relative cell containing the email address, or an email address. Clicking the icon in the result performs the browser's default email action.
Shown below are a label cell and the custom cell in the design mode.
The output from these 2 cells is shown below.
Clicking on the image opens a tab using a URL such as “email:john@acme.com”. The user’s browser may ignore this request or proceed to handle it in some manner. The browser console may show an error such as “Failed to launch 'email:john@acme.com' because the scheme does not have a registered handler.”
Phone
The cell formula result is either:"next" or "previous" indicating the relative cell containing the phone number, or a phone number.Clicking the icon in the result performs the browser's default tel: action.
Shown below are a label cell and the custom cell in the design mode.
The output from these 2 cells is shown below.
Clicking on the image opens a tab using a URL such as “tel:800-555-1212”. The user’s browser may ignore this request or proceed to handle it in some manner.
Text To Speech
The cell formula result may be "next" or "previous" indicating the input cell containing the text to speak, or the text to speak itself.Clicking the icon speaks the given text.
Shown below are a label cell and the custom cell in the design mode.
The output from these 2 cells is shown below.
Clicking on the image emits the text using the browser’s speech functionality (window.speechSynthesis).